<!--
 * @Description: 排入秒杀弹窗
 * @Author: liyujie
 * @Date: 2021/8/20
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/8/20
-->
<template>
    <section class="wrapper">
        <el-dialog
            title="排入秒杀"
            :visible.sync="dialogVisible"
            width="600px"
            :close-on-click-modal="false"
            @close="beforeClose"
        >
            <div class="dialog-content">
                <el-form
                    :model="ruleForm"
                    :rules="rules"
                    label-width="100px"
                    ref="ruleForm"
                >
                    <el-form-item
                        label="选择日期"
                        prop="activeData"
                    >
                        <el-date-picker
                            v-model="ruleForm.activeData"
                            placeholder="选择秒杀日期"
                            type="date"
                            size="medium"
                            style="width: 400px"
                            value-format="timestamp"
                            :picker-options="pickerOptions"
                            @change="selectActiveTime"
                        />
                    </el-form-item>
                    <el-form-item
                        label="选择时间"
                        prop="time_no"
                    >
                        <el-select
                            v-model="ruleForm.time_no"
                            placeholder="选择秒杀时间"
                            size="medium"
                            style="width: 400px"
                        >
                            <el-option
                                v-for="(item,index) in scekillTimeList"
                                :key="index"
                                :label="item.label"
                                :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label-width="0"
                        style="display: flex; justify-content: center;margin-bottom: 0; margin-top: 12px"
                    >
                        <el-button
                            size="medium"
                            style="width: 100px"
                            @click="close"
                        >
                            取消
                        </el-button>
                        <el-button
                            type="primary"
                            size="medium"
                            style="width: 100px;margin-left: 50px"
                            :loading="loading"
                            @click="handleSubmit()"
                        >
                            确定
                        </el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </section>
</template>

<script>
import Vue from "vue";

const Dialog = {
    name: "ScheduleDialog",
    props: {
        goodsList: {
            type: Array,
            default: () => {
                return [];
            }
        }
    },
    data() {
        return {
            dialogVisible: false,
            loading: false,
            ruleForm: {
                activeData: '',
                time_no: ''
            },
            rules: {
                activeData: [
                    {required: true, message: '请选择秒杀日期', trigger: 'blur'}
                ],
                time_no: [
                    {required: true, message: '请选择秒杀时间', trigger: 'blur'}
                ]
            },
            scekillTimeList: [],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < new Date(new Date().setHours(0, 0, 0, 0));
                }
            },
        };
    },
    mounted() {

    },
    methods: {

        /**
         * 显示弹窗
         */
        show() {
            this.dialogVisible = true;
        },

        /**
         * 显示弹窗
         */
        close() {
            this.dialogVisible = false;
        },

        /**
         * 关闭弹窗前
         */
        beforeClose() {
            this.scekillTimeList.length = 0;
            this.ruleForm.time_no = '';
            this.ruleForm.activeData = '';
            this.$emit('close');
        },

        /**
         * 选择秒杀时间
         */
        selectActiveTime() {
            this.ruleForm.time_no = '';
            this.$post('/student/shop_goods_flash_sale%5Cget_simple_time_list', {
                day_time: this.ruleForm.activeData / 1000
            }, resp=> {
                if (resp.code === 1) {
                    if (resp.data.list.length === 0) {
                        this.$message({
                            type: 'warning',
                            message: '当前日期暂无排期'
                        });
                        return;
                    }
                    this.scekillTimeList = resp.data.list.map(item=>{
                        return {
                            value: item.time_no,
                            label: this.$moment(item.start_time * 1000).format('YYYY/MM/DD HH:mm') + ' - ' + this.$moment(item.end_time * 1000).format('YYYY/MM/DD HH:mm')
                        };
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },

        /**
         * 确认排入秒杀
         */
        handleSubmit() {
            this.$refs.ruleForm.validate((valid) => {
                if (valid) {
                    this.loading = true;
                    let apply_nos = this.goodsList.map(item => {
                        return item.apply_no;
                    }).join();

                    this.$post('/student/shop_goods_flash_sale_activity%5Cadd_goods_to_activity', {
                        time_no: this.ruleForm.time_no,
                        apply_nos
                    }, resp => {
                        if (resp.code === 1) {
                            this.$notify({
                                title: '提示',
                                message: '操作成功',
                                duration: 2000,
                                type: 'success'
                            });
                            this.$emit('confirm', true);
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                        this.loading = false;
                    });
                }
            });
        },
    }
};

export default Dialog;

const scheduleDialog = function (config) {
    return new Promise((resolve) => {
        const DialogConstructor = Vue.extend(Dialog);
        const instance = new DialogConstructor({
            propsData: config,
        }).$mount();

        instance.$on("close", function () {
            setTimeout(() => {
                document.body.removeChild(instance.$el);
                instance.$destroy();
            }, 300);
            resolve(false);
        });
        instance.$on("confirm", function (data) {
            instance.close();
            resolve(data);
        });
        document.body.appendChild(instance.$el);
        instance.dialogVisible = true;
    });
};

export { scheduleDialog };
</script>

<style scoped lang="less">
.dialog-content {

}
.dialog-footer {

}
/deep/ .el-dialog__header {
    padding-top: 10px;
    box-shadow:0 1px 0 0 rgba(233,233,233,1);
    display: flex;
    align-items: center;
    background: #FAFAFA;
    border-radius: 4px 4px 0 0;
    .el-dialog__title {
        font-weight: 500;
        color: #333;
        font-size: 14px;
    }
    .el-icon-close:before {
        color: rgb(194,194,194);
        font-size: 17px;
        font-weight: bold;
    }
    .el-dialog__headerbtn {
        top: 14px;
    }
}
/deep/ .el-dialog__body {
    padding: 24px 32px;
}
/deep/ .el-dialog {
    margin-top: 10vh!important;
}
</style>
